<!DOCTYPE html>
<html lang="en" class="no-js">

	<head>
		<meta charset="UTF-8">
		<title>一只慢乌龟的TimeTown</title>
		<link rel="icon" href="/TYdeTimetown/images/title.ico"/>
		<link rel="stylesheet" href="css/about.css" />
		<link rel="stylesheet" href="css/font_import.css" />
		<!--
        	作者：TY
        	时间：2018-06-02
        	描述：bootstrap插件
    	-->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!--end-->
		<!--
        	作者：TY
        	时间：2018-06-02
        	描述：owl.carousel插件
        -->
		<link rel="stylesheet" href="css/owl.carousel.css" />
		<link rel="stylesheet" href="css/owl.theme.css" />
		<script src="js/owl.carousel.min.js"></script>
		<!--end-->
		<!--
        	作者：TY
        	时间：2018-05-30
        	描述：遮盖式菜单样式表
        -->
		<link rel="stylesheet" href="css/menu_style.css" type="text/css" />
		<!--end-->
		<script src="js/modernizr.custom.js"></script>
	</head>

	<body>
		<!--遮盖式菜单-->
		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<ul>
					<li>
						<a href="index.html" target="_self">Home</a>
					</li>
					<li>
						<a href="timeline.html" target="_self">TimeLine</a>
					</li>
					<li>
						<a href="collection.html" target="_self">My Collection</a>
					</li>
					<li>
						<a href="about_me.html" target="_self">About Me</a>
					</li>
				</ul>
			</nav>
		</div>
		<!--end-->
		<header>
			<div class="for-sticky">
				<div class="logo">
					<a href="index.html"><img alt="logo" class="logo-nav" src="images/title_simple.png"></a>
				</div>
			</div>
			<button class="menu-button" id="open-button">
        		<span></span>
        		<span></span>
        		<span></span>
      		</button>
		</header>
		<section class="content">
			<div class="imgback">
				<div class="intro_timeline">
					<h2>About Me</h2>
					<br>
					<span id="typed"></span>
				</div>
			</div>
			<button class="go_down" onclick="clicktest()">My Info</button>
		</section>
		<section class="about_me">
			<div class="container full_screen">
				<div class="row">
					<div class="col-md-6 col-sm-12">
						<img alt="show_img" src="images/pic_aboutme1_meitu_1_meitu_4.jpg" />
					</div>
					<div class="col-md-6 col-sm-12">
						<div id="my_info" class="owl-carousel">
							<div class="item">
								<p>
									Travel is a kind of attitude to life.
									<br/>
									<br/>It can give me a lot of inspiration,
									<br/>
									<br/>so love life and love to travel
									<br/>
								</p>
								<h5>
                        			T.Y.
                      			</h5>
								<img alt="my signiture" src="images/sig5.png" />
							</div>
							<div class="item">
								<table class="info_detail">
									<tr>
										<td>Name </td>
										<td>:</td>
										<td class="content_td"> Tim Young</td>
									</tr>
									<tr>
										<td>Phone </td>
										<td>:</td>
										<td class="content_td"> 1234567890</td>
									</tr>
									<tr>
										<td>Email </td>
										<td>:</td>
										<td class="content_td"> hahaha@gmail.com</td>
									</tr>
									<tr>
										<td>Address </td>
										<td>:</td>
										<td class="content_td">BakerST.221B</td>
									</tr>
									<tr>
										<td>University</td>
										<td>:</td>
										<td class="content_td">ZUEL</td>
									</tr>
									<tr>
										<td>Major </td>
										<td>:</td>
										<td class="content_td">Information Management and Information System</td>
									</tr>
									<tr>
										<td>Profession </td>
										<td>:</td>
										<td class="content_td">undergraduate students</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container half_screen">
				<div class="row">
					<div class="col-md-6 col-sm-12">
						<div>
							<div>
								<p>
									Travel is a kind of attitude to life.
									<br/>
									<br/>It can give me a lot of inspiration,
									<br/>
									<br/>so love life and love to travel
									<br/>
								</p>
								<h5>
                        			T.Y.
                      			</h5>
								<img alt="my signiture" src="images/sig5.png" />
							</div>
						</div>
					</div>
					<div class="col-md-6 col-sm-12">
						<div>
							<table class="info_detail">
								<tr>
									<td>Name </td>
									<td>:</td>
									<td class="content_td"> Tim Young</td>
								</tr>
								<tr>
									<td>Phone </td>
									<td>:</td>
									<td class="content_td"> 1234567890</td>
								</tr>
								<tr>
									<td>Email </td>
									<td>:</td>
									<td class="content_td"> hahaha@gmail.com</td>
								</tr>
								<tr>
									<td>Address </td>
									<td>:</td>
									<td class="content_td">BakerST.221B</td>
								</tr>
								<tr>
									<td>University</td>
									<td>:</td>
									<td class="content_td">ZUEL</td>
								</tr>
								<tr>
									<td>Major </td>
									<td>:</td>
									<td class="content_td">Information Management and Information System</td>
								</tr>
								<tr>
									<td>Profession </td>
									<td>:</td>
									<td class="content_td">undergraduate students</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</section>
		<div class="row send_message">
			<div class="col-md-4">
				<div class="my_words">
					<h2 class="part_intro">
								<span>Contact me</span>
							</h2>
					<p>It's my pleasure to share my tour experience with you guys, and I will also be happy to hear some interesting story from you
						<br/>
						<br/> so,if you have something wanna tell me,please contact me~</p>
				</div>
			</div>
			<div class="col-md-8">
				<form>
					<div class="connect_me">
						<div class="connect_me_inside">
							<input class="send_content" required="" type="text" placeholder="Name">
						</div>
					</div>
					<div class="connect_me">
						<div class="connect_me_inside">
							<input class="send_content" required="" type="email" placeholder="Email">
						</div>
					</div>
					<div class="connect_me">
						<div class="connect_me_inside">
							<textarea class="send_content" required="" placeholder="what you wanna talk with me"></textarea>
						</div>
					</div>
					<input id="sendMessage" name="sendMessage" type="submit" value="Send Message">
				</form>
			</div>
		</div>

		<!--
        	作者：TY
        	时间：2018-05-30
        	描述：打印机效果
        -->
		<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
		<script>
			var boxObj2 = document.getElementById('typed');
			new Typed(boxObj2, {
				strings: ['If you love travelling too', 'If you have questions to ask', 'Or just wanna talk with me', 'you can connect with me'],
				typeSpeed: 50,
				startDelay: 200,
				loop: true,
				loopCount: Infinity,
				cursorChar: ''
			});
		</script>
		<!--end-->
		<!--
        	作者：TY
        	时间：2018-05-31
        	描述：打开菜单
        -->
		<script src="js/classie.js"></script>
		<script src="js/menu.js"></script>

		<!--end-->
		<!--
        	作者：TY
        	时间：2018-06-01
        	描述：点击see more按钮的滑动效果
        -->
		<script>
			$(document).ready(function() {
				$(".go_down").click(function() {
					$("html, body").animate({
						scrollTop: $(".about_me").offset().top
					}, {
						duration: 500,
						easing: "swing"
					});
					return false;
				});
			})
		</script>
		<!--
        	作者：TY
        	时间：2018-06-02
        	描述：启动owlCarousel
        -->
		<script>
			$(function() {
				$("#my_info").owlCarousel({
					items: 1
				});
			});
		</script>
	</body>

</html>